<template>
    <div class="carteInfor">
        <el-tooltip class="item" effect="dark" :content="$t('message.add')" placement="top">
            <el-button class="addBtn" type="primary" @click="handleAdd()" icon="iconfont icon-xinzeng-wubiankuang"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="$t('message.del')" placement="top">
            <el-button class="addBtn" type="info" @click="handleDelete()" icon="iconfont icon-shanchu-kong"></el-button>
        </el-tooltip>
        <el-table
            ref="multipleTable"
            :data="tableData"
            :row-key="row => row.CarteId"
            style="width: 100%;"
            class="tableStyle"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
                'background-color': '#f8f8f9',
            }"
            :height="tableHeight"
            :max-height="tableHeight">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column :label="$t('message.carteName')" prop="CarteName"></el-table-column>
            <el-table-column :label="$t('message.carteIcon')" prop="CarteIcon">
                <template slot-scope="scope">
                    <i class="iconfont" v-bind:class="scope.row.CarteIcon"></i>
                </template>
            </el-table-column>
            <el-table-column :label="$t('message.carteType')" prop="CarteType">
                <template slot-scope="scope">
                    <el-button type="primary" class="btnStyle" v-show="scope.row.CarteType === '目录'">{{scope.row.CarteType}}</el-button>
                    <el-button type="warning" class="btnStyle" v-show="scope.row.CarteType === '菜单'">{{scope.row.CarteType}}</el-button>
                    <el-button type="info" class="btnStyle" v-show="scope.row.CarteType === '按钮'">{{scope.row.CarteType}}</el-button>
                </template>
            </el-table-column>
            <el-table-column :label="$t('message.location')" prop="Location"></el-table-column>
            <el-table-column :label="$t('message.operating')">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="$t('message.edit')" placement="top">
                        <el-button type="primary" @click="handleEdit(scope.row)" icon="iconfont icon-bianji-kong"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="Pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"  :page-size="PageSize" layout="total, prev, pager, next,sizes"
                :total="count">
            </el-pagination>
        </div>
        <el-dialog :title="addTitle" :visible.sync="dialogAddVisible"  width="540px" :close-on-click-modal='false'>
            <el-form :model="addForm" :rules="rules" ref="addForm" :label-width="labelWidth">
                <el-form-item :label="$t('message.carteType')" prop="CarteType">
                    <el-radio-group v-model="addForm.CarteType">
                        <el-radio :label="1">目录</el-radio>
                        <el-radio :label="2">菜单</el-radio>
                        <el-radio :label="3">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('message.carteName')" prop="CarteName">
                    <el-select clearable v-model="addForm.CarteName" :placeholder="$t('message.pleaseSelectCarteName')">
                        <el-option v-for="(item, index) in carteNames" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('message.carteIcon')" prop="CarteIcon">
                    <el-dropdown trigger="click" class="newDrop">
                        <span class="el-dropdown-link">
                            <el-input v-model="addForm.CarteIcon" readonly :placeholder="$t('message.pleaseSelectCarteIcon')"></el-input>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="newMenu">
                            <el-dropdown-item v-for="(item, index) in icons" :key="index">
                                <div class="icons">
                                    <div class="icon">
                                        <i class="iconfont" v-bind:class="item.icon"></i>
                                    </div>
                                    <div class="name">{{item.name}}</div>
                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-form-item>
                <el-form-item :label="$t('message.location')" prop="Location">
                    <el-input v-model="addForm.Location" :placeholder="$t('message.pleaseEnterLocation')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('message.parentDirectory')" prop="Parent">
                    <el-select clearable v-model="addForm.Parent" :placeholder="$t('message.pleaseSelectParentDirectory')">
                        <el-option v-for="(item, index) in parents" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('message.isUse')" prop="IsUse">
                    <el-radio-group v-model="addForm.IsUse">
                        <el-radio :label="1">有效</el-radio>
                        <el-radio :label="2">无效</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('message.sort')" prop="Sort">
                    <el-input-number v-model="addForm.Sort" @change="handleChange" :min="1" :max="10"></el-input-number>
                </el-form-item>
                <el-form-item :label="$t('message.describe')" prop="Description" class="w100">
                    <el-input type="textarea" :rows="5" :placeholder="$t('message.pleaseEnterDescribe')" v-model="addForm.Description"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-tooltip class="item" effect="dark" :content="$t('message.save')" placement="top">
                    <el-button type="primary" @click="addCarte('addForm')" icon="iconfont icon-gou-wukuang"></el-button>
                </el-tooltip>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { baseUrl, baseImgPath } from "@/config/env";
    import { getStore, getLocal } from "../../config/mUtils"
    export default {
        name: "carte",
        data() {
            return {
                baseUrl,
                baseImgPath,
                PageIndex: 1,
                PageSize: 10,
                count: 2,
                labelWidth: 0 + 'px',
                addTitle: this.$t('message.addCarte'),
                tableData: [
                    {
                        CarteId: '00100',
                        CarteName: '我的申请',
                        CarteIcon: 'icon-liebiao',
                        CarteType: '目录',
                        Location: '/common',
                        children: [{
                            CarteId: '00110',
                            CarteName: '申请列表',
                            CarteIcon: '',
                            CarteType: '菜单',
                            Location: '/common',
                            children: [
                                {
                                    CarteId: '00111',
                                    CarteName: '添加',
                                    CarteIcon: 'icon-xinzeng-wubiankuang',
                                    CarteType: '按钮',
                                    Location: '/common',
                                }, {
                                    CarteId: '00112',
                                    CarteName: '删除',
                                    CarteIcon: 'icon-shanchu-kong',
                                    CarteType: '按钮',
                                    Location: '/common',
                                }, {
                                    CarteId: '00113',
                                    CarteName: '修改',
                                    CarteIcon: 'icon-bianji-kong',
                                    CarteType: '按钮',
                                    Location: '/common',
                                }
                            ]
                        }]
                    }, {
                        CarteId: '00200',
                        CarteName: '系统设置',
                        CarteIcon: 'icon-shezhi-kong',
                        CarteType: '目录',
                        Location: '/common',
                        children: [{
                            CarteId: '00210',
                            CarteName: '业务系统管理',
                            CarteIcon: '',
                            CarteType: '菜单',
                            Location: '/common',
                            children: [
                                {
                                    CarteId: '00211',
                                    CarteName: '添加',
                                    CarteIcon: 'icon-xinzeng-wubiankuang',
                                    CarteType: '按钮',
                                    Location: '/common',
                                }, {
                                    CarteId: '00212',
                                    CarteName: '删除',
                                    CarteIcon: 'icon-shanchu-kong',
                                    CarteType: '按钮',
                                    Location: '/common',
                                }, {
                                    CarteId: '00213',
                                    CarteName: '修改',
                                    CarteIcon: 'icon-bianji-kong',
                                    CarteType: '按钮',
                                    Location: '/common',
                                }
                            ]
                        }]
                    }
                ],
                currentPage: 1,
                tableHeight: 0 + 'px',
                multipleSelection: [],
                dialogAddVisible: false,
                addForm: {
                    CarteType: '',
                    CarteName: '',
                    CarteIcon: '',
                    Location: '',
                    Parent: '',
                    IsUse: '',
                    Sort: 1,
                    Description: ''
                },
                rules: {
                    CarteType: [{ required: true, message: this.$t('message.pleaseSelectCarteType'), trigger: "change" }],
                    CarteName: [{ required: true, message: this.$t('message.pleaseSelectCarteName'), trigger: "change" }],
                    Location: [{ required: true, message: this.$t('message.pleaseEnterLocation'), trigger: "blur" }],
                    Parent: [{ required: true, message: this.$t('message.pleaseSelectParentDirectory'), trigger: "change" }],
                    IsUse: [{ required: true, message: this.$t('message.pleaseSelectIsUse'), trigger: "change" }],
                },
                carteNames: [
                    {
                        label: '名称1',
                        value: 0
                    }, {
                        label: '名称2',
                        value: 1
                    }
                ],
                icons: [
                    {
                        icon: 'icon-bianji-kong',
                        name: 'editor'
                    }, {
                        icon: 'icon-shanchu-kong',
                        name: 'delete'
                    }, {
                        icon: 'icon-bianji-kong',
                        name: 'editor'
                    }, {
                        icon: 'icon-shanchu-kong',
                        name: 'delete'
                    }
                ],
                parents: [
                    {
                        label: '根目录',
                        value: 0
                    }, {
                        label: '申请列表',
                        value: 1
                    }, {
                        label: '系统设置',
                        value: 2
                    }
                ]
            };
        },
        computed: {},
        created() {
            this.watchHeight();
            // this.initData();
            this.resetLabelWidth();
        },
        mounted() {
            setTimeout(() => {
                let widowHeight = document.documentElement.clientHeight-270;
                this.tableHeight = widowHeight;
            }, 1);
        },
        methods: {
            watchHeight() {
                setTimeout(() => {
                    const that = this;
                    window.onresize = function temp() {
                        let widowHeight = document.documentElement.clientHeight-270;
                        that.tableHeight = widowHeight;
                    };
                }, 1);
            },
            resetLabelWidth() {
                if (getLocal('language') === 'en_US') {
                    this.labelWidth = 115 + 'px';
                } else {
                    this.labelWidth = 100 + 'px';
                }
            },
            async initData() {
                /**获取用户列表 */
                try {
                    this.getLanguageResource();
                    this.getSystemList();
                } catch (err) {
                    console.log("获取数据失败", err);
                }
            },
            handleSizeChange(val) {
                this.currentPage = 1;
                this.PageIndex = 1;
                this.PageSize = val;
                this.getSystemList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.PageIndex = val;
                this.getSystemList();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleAdd() {
                this.dialogAddVisible = true;
                this.addTitle = this.$t('message.addCarte');
                this.$nextTick(() => {
                    this.$refs['addForm'].clearValidate();
                });
                this.addForm =  {
                    CarteType: '',
                    CarteName: '',
                    CarteIcon: '',
                    Location: '',
                    Parent: '',
                    IsUse: '',
                    Sort: 1,
                    Description: ''
                }
            },
            handleEdit(val) {
                this.dialogAddVisible = true;
                this.addTitle = this.$t('message.editCarte');
                this.addForm =  {
                    CarteType: val.CarteType,
                    CarteName: val.CarteName,
                    CarteIcon: val.CarteIcon,
                    Location: val.Location,
                    Parent: '',
                    IsUse: 1,
                    Sort: 1,
                    Description: val.Description
                }
            },
            handleDelete(index, row) {
                if (this.multipleSelection.length > 0) {
                    this.$confirm(this.$t('message.isDel'), 'Warning', {
                        confirmButtonText: ' ',
                        cancelButtonText: ' ',
                        confirmButtonClass: 'iconfont icon-gou-wukuang',
                        cancelButtonClass: 'iconfont icon-guanbi-wukuang',
                        type: 'warning'
                    }).then(() => {
                    }).catch(() => {
                    });
                } else {
                    this.$message({
                        type: "warning",
                        message: this.$t('message.selectDelData')
                    });
                }
            },
            handleChange(value) {
                console.log(value);
            },
            addCarte(formName) {
                this.$refs[formName].validate(async valid => {
                    if (valid) {
                        this.dialogAddVisible = false;
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
